آموزش ساخت اپلیکیشن انتقال فایل پویا با WebRTC مناسب سال ۲۰۲۶ و آینده [ویدئویی] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه‌ای بر فایل‌ها Introduction to Files

• مقدمه این بخش Intro to This Section

• فایل‌ها چیستند؟ What Are Files?

• مراحل لازم برای ارسال فایل در شبکه Steps Required to Send a File Over the Wire

• آماده‌سازی و ارسال فایل با استفاده از کد شبه پایتون Preparing and Sending a File Using Pseudo Python Code

• دریافت، خواندن و ایجاد فایل با استفاده از کد شبه پایتون Receiving, Reading, and Creating a File Using Pseudo Python Code

• روشی مدرن‌تر برای ارسال فایل در شبکه با استفاده از WebRTC A More Modern Way of Sending a File Over the Network Using WebRTC

راه‌اندازی اتصال WebSocket و آماده‌سازی پروژه Setting Up a WebSocket Connection and Getting Project Ready

• مرور کلی HTML و CSS HTML and CSS Overview

• ایجاد فایل ورودی JavaScript و تنظیم ESModules Creating Our Entry JavaScript File and Setting Up ESModules

• تنظیم وضعیت (State) در سمت کلاینت Setting Up State on the Client Side

• راه‌اندازی اتصال WebSocket در کلاینت Setting Up a WebSocket Connection on the Client

• راه‌اندازی لاگر اختصاصی Setting Up Our Custom Logger

• راه‌اندازی سرور Node و اجرای سرور HTTP Setting Up a Node Server, and Spinning Up an HTTP Server

• راه‌اندازی سرور WebSocket و استخراج UserId Setting Up a WebSocket Server, and Extracting the UserId

• ذخیره وضعیت اتصال کاربران در سرور Storing Connection State for Users, on Our Server

• ثبت Event Listenerهای WebSocket در سرور Registering WebSocket Event Listeners on the Server

• مدیریت قطع اتصال‌ها Handling Disconnections

• خلاصه و تست Summary and Testing

آشنایی با File API و استفاده از AJAX برای بررسی شناسه گیرنده Intro to the File API and Using AJAX to Check the Recipient ID

• مرور پروژه، اصلاحات جزئی و فایل‌های شروع Project Review, Minor Fixes, and Starting Files

• استخراج شناسه نشست (Session ID) گیرنده Extracting the Receiver's Session ID

• ارسال درخواست AJAX با Fetch API برای بررسی شناسه گیرنده Sending an AJAX Request Using the Fetch API to Check Receiver's Session ID

• مدیریت درخواست AJAX در سرور Handling the AJAX Request on the Server

• تکمیل منطق AJAX در سمت کلاینت Finishing Off Our Client-Side AJAX Logic

• تست درخواست AJAX و رفع باگ‌های جزئی Testing Our AJAX Request and Minor Bug Fixes

• مقدمه‌ای بر File API Introduction to the File API

• ایجاد فایل‌های Null Byte در ترمینال برای اهداف تست Creating Null Byte Files in the Terminal for Testing Purposes

• مشخصات فایل و مشاهده حافظه Heap در تب Memory مرورگر The File Specification, and Viewing Heap Memory in the Browser "Memory" Tab

• اطمینان از عدم بارگذاری فایل خالی توسط کاربر Ensuring a User Does Not Load an Empty File

• تکمیل منطق بررسی آپلود فایل Completing Our File Upload Checking Logic

• فعال‌سازی دکمه ارسال و آماده‌سازی برای WebRTC Enabling the "Send" Button and Getting Ready for WebRTC

راه‌اندازی اتصال WebRTC از صفر! Setting Up a WebRTC Connection, From Scratch!

• مرور کلی نحوه عملکرد WebRTC Overview of How WebRTC Works

• ایجاد یک WebRTC Offer Creating a WebRTC Offer

• توضیح توابع createPeerConnection و createDataChannel Explaining the createPeerConnection() and createDataChannel() Functions

• ارسال WebRTC Offer به سرور سیگنالینگ Sending the WebRTC Offer to the Signaling Server

• انتقال Offer به کاربر گیرنده فایل Relaying the Offer to the User Receiving the File

• راه‌اندازی Event Listenerهای پیام‌های ورودی برای اتصال WebSocket Setting Up Incoming Message Event Listeners for Our WebSocket Connection

• دریافت Offer و تولید WebRTC Answer Receiving the Offer, and Generating the WebRTC Answer

• ارسال و دریافت WebRTC Answer Sending and Receiving the WebRTC Answer

• مدیریت ICE Candidates Dealing with ICE Candidates

• وارد کردن ICE Candidates از آرایه به شیء PC Pushing ICE Candidates in Our Array Into the PC Object

• تست کد و فایل‌های نهایی Testing Code and Ending Files

انتقال فایل روی WebRTC با استفاده از FileReader API File Transfer Over WebRTC Using FileReader API

• روش‌های مختلف خواندن فایل در حافظه توسط مرورگر The Different Ways a Browser Can Read a File Into Memory

• اجرای کد sendFile Triggering Our sendFile() Code

• تنظیم المان progress و تست کد Setting Up the progress Element and Testing Our Code

• مقدمه‌ای بر FileReader API Introduction to the FileReader API

• خطاهای مرورگر و WebRTC در صورت استفاده از FileReader بدون Chunking Browser and WebRTC Errors If We Use the FileReader Without Chunking

• مشاهده رشد و کاهش حافظه Heap در زمان واقعی Viewing the Memory Heap Growing and Shrinking in Real Time

• تکه‌تکه کردن (Chunking) و صف ارسال Chunking and the Send Queue

• نوشتن منطق تکه‌تکه کردن فایل‌ها Writing Logic to Chunk Our Files

• به‌روزرسانی مقدار Offset، خواندن تکه‌های بعدی و به‌روزرسانی المان progress Updating the Offset Value, Reading Further Chunks, & Updating Progress Element

• تست کد Testing Code

• مشاهده ویژگی BufferedAmount در Data Channel Viewing the BufferedAmount Property on the Data Channel

• نحوه استفاده از ویژگی‌های BufferedAmount و BufferedAmountLowThreshold How We Have to Use the BufferedAmount and BufferedAmountLowThreshold Properties

• تنظیم آستانه صف ارسال و BufferedAmountLowThreshold Setting Our Send Queue Thresholds and the BufferedAmountLowThreshold

• توقف ارسال هنگام پر شدن بافر صف ارسال (BufferedAmount) Pause Sending When the Send Queue Buffer (AKA: BufferedAmount) Gets Too Full

• از سرگیری ارسال هنگام اجرای رویداد BufferedAmountLow Resume Sending When the "BufferedAmountLow" Event Is Fired

• تست کد فرستنده و پیوست فایل‌های کدنویسی Testing Our Sender Code and Attaching Coding Files

• نحوه دریافت یک فایل How to Receive a File

• ارسال متاداده‌های فایل به گیرنده Sending File Metadata to the Receiver

• ثبت Event Listener پیام در Data Channel گیرنده Registering the "Message" Event Listener on the Receiver's Data Channel

• استخراج متاداده‌های فایل Extracting File Metadata

• مدیریت تکه‌ها و نمایش آمار Handling Chunks and Displaying Statistics

• ایجاد شیء Blob و استفاده از رابط URL برای ساخت لینک دانلود Creating a Blob Object and Using the URL Interface to Create a Downloadable Link

• تست کد و بحث درباره منطق متاداده‌ها Testing Our Code and Discussion About Metadata Logic

• چرا یک شیء Blob واحد ایجاد کنیم؟ Why Create One Single Blob Object?

• بستن اصولی WebRTC و Data Channel Closing a WebRTC and Data Channel Gracefully

• بستن منظم Data Channel و شیء WebRTC Peer Connection Gracefully Closing the Data Channel and the WebRTC Peer Connection Object

• پاک‌سازی حافظه متغیرها Clearing Variable Memory

• امکان توقف ارسال فایل توسط کاربر Allowing the User to "Stop" Sending a File

• رفع خطای Undefined Fixing an Undefined Error

انتقال فایل روی WebRTC با استفاده از Blobs File Transfer Over WebRTC Using Blobs

• مقایسه Blobs در مقابل ArrayBuffers و فایل‌های شروع Blobs vs. ArrayBuffers and Starting Files

• ارسال مستقیم Blobs Sending Blobs Directly

• ویژگی binaryType در DataChannel The binaryType Property of the DataChannel

انتقال فایل روی WebRTC با FileReader API و فشرده‌سازی File Transfer Over WebRTC Using FileReader API, With Compression

• مقدمه‌ای بر فشرده‌سازی و کتابخانه Pako Introduction to Compression and the Pako Library

• ارسال ArrayBuffers فشرده شده Sending Compressed ArrayBuffers

• دریافت و از فشرده‌سازی ArrayBuffers Receiving and Decompressing ArrayBuffers

• چگونه فشرده‌سازی تصویر می‌تواند منجر به فایلی بزرگتر از نسخه اصلی شود Compressing an Image Can Result in a Larger File Than the Original (Mind Blown)

• راه حل ساده - کاهش اندازه هر تکه ارسالی در Data Channel Easy Solution – Reduce the Size of Each Chunk Sent Over the Data Channel

• راه حل دوم، بخش اول - فشرده‌سازی فقط برای فایل‌های غیر تصویری Solution Two, Part 1 – Only Compress Non-Image Files

• راه حل دوم، بخش دوم - از فشرده‌سازی فقط برای فایل‌های غیر تصویری Solution Two, Part 2 – Only Decompress Non-Image Files

• رفع خطا و جشن موفقیت Fixing the Error and Celebrating Our Success

انتقال فایل روی WebRTC با استفاده از Streams API File Transfer Over WebRTC Using the Streams API

• مقدمه بخش Section Intro

• آشنایی با Streams API Intro to the Streams API

• پیاده‌سازی File Streams API Let's Implement the File Streams API

• تست کد و بررسی مشکلات Streams API Testing Our Code and the Problems with the Streams API

• مقدمه‌ای بر حالت BYOB در Streams API Intro to the BYOB Mode of the Streams API

• پیاده‌سازی BYOB و تست Streams API Implementing BYOB and Testing Our Streams API

بخش پایانی Outro

• بخش پایانی Outro